import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    text: '',
    desc: '',
    city: '2',
    isSingle: true,
  }
  render() {
    return (
      <>
        <div>
          <input
            type='text'
            onChange={this.chanageHandle}
            value={this.state.text}
          />
          <br />
          描述：
          <textarea
            name='desc'
            onChange={this.changeContent}
            value={this.state.desc}
            id=''
            cols='30'
            rows='10'
          ></textarea>
          <br />
          城市：
          <select
            name='city'
            id=''
            value={this.state.city}
            onChange={this.handleCity}
          >
            <option value='1'>北京</option>
            <option value='2'>上海</option>
            <option value='3'>广州</option>
            <option value='4'>深圳</option>
          </select>
          <br />
          是否单身：
          <input
            type='checkbox'
            name='isSingle'
            checked={this.state.isSingle}
            onChange={this.handleChange}
          />
        </div>
      </>
    )
  }
  chanageHandle = (e) => {
    console.log(e)
    this.setState({
      text: e.target.value,
    })
  }
  changeContent = (e) => {
    console.log(e)
    this.setState({
      desc: e.target.value,
    })
  }
  handleCity = (e) => {
    console.log(e)
    this.setState({
      city: e.target.checkbox,
    })
    // 优化： 使用一个事件处理程序处理多个表单元素
    // let { name, type, value, checked } = e.target.
    // console.log(name, type, value, checked)
    // value = type === 'checkbox' ? checked : value
    // this.setState({ [name]: value })
  }
  handleChange = (e) => {
    console.log(e)
    this.setState({
      isSingle: e.target.checked,
    })
  }
}
ReactDOM.render(<App />, document.getElementById('root'))
